<template>
  <div class="app-container">
    <el-container>
      <el-aside width="420px">
        <el-carousel trigger="click" width="400px" height="400px">
          <el-carousel-item v-for="item in mainInfo.carouselImgList">
            <el-image :src="generateImagePath(item.imgPath)" fit="contain" style="width: 400px; height: 400px;" />
            <span>{{ item.imgPath }}</span>
          </el-carousel-item>
        </el-carousel>
      </el-aside>
      <el-main>
        <div class="sku_name"><span>{{ mainInfo.info.goodsName }}</span></div>
        <div class="news"><span>【促销中】</span></div>
        <div class="summary summary-first">
          <el-card>
            <el-descriptions :column="1">
              <el-descriptions-item label="价格">
                <span class="s_price">￥ {{ mainInfo.info.price/100 }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="促销">无</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </div>
        <div class="summary p-choose-wrap">
          <el-form>
            <template v-for="assort in assortInfo.assortList" >
              <el-form-item v-if="assort.options" :label="assort.label" label-width="80px" :prop="assort.attrId" >
                <el-radio-group v-if="assort.options && assort.options.length > 0" v-model="assort.value"
                                size="mini" @change="handelRedioChange(assort.attrId)" >
                  <el-tooltip effect="dark" v-for="item in assort.options" :content="item.tooltip_text" placement="top">
<!--                    <el-radio-button :class="item.cssClass" :label="item.value" :disabled="item.disabled" >{{ item.label }}</el-radio-button>-->
                    <el-radio-button :class="item.cssClass" :label="item.value" :disabled="true" >{{ item.label }}</el-radio-button>
                  </el-tooltip>
                </el-radio-group>
              </el-form-item>
            </template>
          </el-form>
        </div>
        <div>
          <el-tabs v-model="activeName" type="card" >
            <el-tab-pane label="商品介绍" name="goods_config">
              <el-descriptions :column="1" size="small" border >
                <el-descriptions-item label="商品名称" >{{ mainInfo.info.goodsName }}</el-descriptions-item>
                <el-descriptions-item label="品牌" >{{ mainInfo.info.brandName }}</el-descriptions-item>
                <el-descriptions-item label="商品编号" >{{ mainInfo.info.gNumber }}</el-descriptions-item>
                <el-descriptions-item label="店铺" >{{ mainInfo.info.deptName }}</el-descriptions-item>
                <el-descriptions-item
                  v-for="item in mainInfo.config"
                  :label="item.configName"
                >
                  {{ item.configVal || (item.valueUnit ? item.valueName+' '+item.valueUnit : item.valueName) }}
                </el-descriptions-item>
              </el-descriptions>
              <div style="height: 100%">
                <el-image v-for="item in mainInfo.descImgList" :src="generateImagePath(item.imgPath)"
                          fit="contain" style="width: 650px; height: auto;" />
              </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="规格与包装" name="goods_desc">
              <div v-html="mainInfo.desc" style="padding-left: 20px;" ></div>
            </el-tab-pane>
            <el-tab-pane label="图片描述" name="after_sale">
              <div style="height: 100%">
                <el-image v-for="item in mainInfo.descImgList" :src="generateImagePath(item.imgPath)"
                          fit="contain" style="width: 650px; height: auto;" />
              </div>
            </el-tab-pane> -->
            <el-tab-pane label="规格与包装" name="goods_desc">规格与包装</el-tab-pane>
            <el-tab-pane label="售后保障" name="after_sale">
              <div v-html="mainInfo.desc" style="padding-left: 20px;" ></div>
            </el-tab-pane>
            <el-tab-pane label="商品评价" name="goods_reviews">商品评价</el-tab-pane>
            <el-tab-pane label="店铺产品" name="goods_in_shop">店铺产品</el-tab-pane>
          </el-tabs>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { getGoodsMain } from "@/api/goods/shop";
import { getAssortInfo } from "@/api/goods/main";
import { getImagesByGNumber } from "@/api/goods/image";
import { listConfig } from "@/api/goods/config";
import { listDesc } from "@/api/goods/desc";

export default {
  name: "GoodsItem",
  props: {
    gNumber: {
      type: String,
      default: ''
    },
    deptId: {
      type: Number,
      default: -1,
    },
  },
  data() {
    return {
      imgServe: process.env.VUE_APP_BASE_API,
      mainInfo: this.generateMainInfo(),
      assortInfo: {
        assort: {},
        assortList: [],
      },
      activeName: "goods_config",
    }
  },
  watch: {
    gNumber(newVal, oldVal) {
      this.generateGoodsInfo();
    }
  },
  created() {
    this.activeName = 'goods_config';
    this.generateGoodsInfo();
  },
  methods: {
    generateImagePath(path) {
      if (path && path.indexOf('http') !== 0) {
        return this.imgServe + path
      } else {
        return path;
      }
    },
    generateMainInfo() {
      return {
        info: {},
        images: [],
        carouselImgList: [],
        descImgList: [],
        desc: null,
        config: [],
      };
    },
    resetMainInfo() {
      this.activeName = "goods_config";
      this.mainInfo = this.generateMainInfo();
    },
    generateGoodsInfo() {
      this.resetMainInfo();
      if (this.gNumber) {
        this.getGoodsInfoByGNumber();
        this.getGoodsImagesByGNumber();
        this.getAssortInfo();
        this.getGoodsDesc();
        this.getConfigInfo();
      }
    },
    getConfigInfo() {
      const param = { gNumber: this.gNumber };
      listConfig(param).then(res => {
        this.mainInfo.config = res.data;
      })
    },
    getGoodsDesc() {
      listDesc(this.gNumber).then(res => {
        const data = res.data;
        if (data && data[0]) {
          this.mainInfo.desc = data[0].content
        }
      })
    },
    getGoodsInfoByGNumber() {
      const param = { gNumber: this.gNumber, deptId: this.deptId };
      getGoodsMain(param).then(res => {
        this.mainInfo.info = res.data;
      })
    },
    getGoodsImagesByGNumber() {
      getImagesByGNumber(this.gNumber).then(res => {
        const images = res.data;
        this.mainInfo.images = images;
        this.mainInfo.carouselImgList = images.filter(item => item.imgType === '2');
        this.mainInfo.descImgList = images.filter(item => item.imgType === '3');
      })
    },
    getAssortInfo() {
      getAssortInfo(this.gNumber).then(res => {
        let map = res.data;
        this.assortInfo.assort = map.assort;
        this.assortInfo.assortList = map.assortOptions;
        this.generateAssortInfo();
      })
    },
    generateAssortInfo() {
      let assort = this.assortInfo.assort;
      let list = this.assortInfo.assortList;
      list.filter(item => {
        if (item.options) {
          item.options.filter(option => {
            if (option.goods) {
              this.isExistGoods(item.attrId, assort, option);
            } else {
              option.disabled = true;
              option.cssClass = "no_goods"
              option.tooltip_text = "无此商品"
              option.hasGoods = false;
            }
          })
        }
      })
      this.assortInfo.assortList = list;
    },
    isExistGoods(attrId, assort, option) {
      if (assort[attrId] && assort[attrId].attrId && option.value == assort[attrId].valueId) {
        option.tooltip_text = option.label
        option.cssClass = ""
        option.hasGoods = true;
      } else {
        let isExist = false;
        for (let gNumber in option.goods) {
          if (gNumber == this.gNumber) {
            isExist = true;
          }
          if (!isExist) {
            isExist = true;
            let attrs = option.goods[gNumber];
            for (let attr in assort) {
              if (assort[attr] && assort[attr].attrId && assort[attr].attrId != attrId) {
                if (assort[attr].valueId != attrs[attr]) {
                  isExist = false;
                }
              }
            }
          }
        }
        if (isExist) {
          option.tooltip_text = option.label
          option.cssClass = ""
          option.hasGoods = true;
        } else {
          option.tooltip_text = this.generateNotExistMsg(attrId, assort, option)
          option.cssClass = "no_goods"
          option.hasGoods = false;
        }
      }
    },
    generateNotExistMsg(attrId, assort, option) {
      let msg = '';
      let hasAttrId = false;
      for (let id in assort) {
        if (id == attrId) {
          hasAttrId = true;
          msg += ' - [' + option.value + ']'
        } else {
          msg += ' - ' + assort[id].valueId
        }
      }
      if (!hasAttrId) {
        msg += ' - [' + option.value + ']'
      }
      if (msg) {
        msg = msg.substring(3) + ' 无此商品'
      }
      return msg;
    },
    handelRedioChange() {},
  }
}
</script>
<style scoped>
.el-aside {
  background-color: transparent;
}
.el-carousel {
  border: 1px solid #ccc;
  border-radius: 5px;
}
.el-main {
  .sku_name span {
    font-size: 18px;
  }
  .news span {
    color: #e4393c;
  }
  .summary {
    .el-card .el-card__body {
      padding-left: 10px;
    }
    .s_price {
      color: #e4393c;
    }
  }
}
::v-deep .el-carousel__button {
  width: 20px;
}

::v-deep .el-descriptions-item__label {
  min-width: 80px;
}
</style>
